<template>
<div  style="width:1040px;height:400px;display: flex;">
 <div id="echarts_list" style="width:550px; height: 400px"></div>
  <div id="echarts_lists" style="width:500px; height: 400px"></div>
</div>
</template>

<script>
import * as echarts from "echarts";
import { gatemonitorpost } from "@/api/mapapi";
export default {
  props: ["gateid"],
  data() {
    return {
      option_left: {},
      option_right: {},
      oldValue:null, //闸门监控编号
      Opening: [], //闸门开度数据
      WaterLevel: [], //闸门水位数据
    };
  },
  watch: {
    gateid:{
      handler(newValue,oldValue){
        this.oldValue =oldValue
        this.gateid = newValue;
        this.gatemonitor()
      }
    }
  },
  created() {
  },
  mounted() {
     this.gatemonitor()
  },
  methods: {
    //   监控数据请求
    gatemonitor() {
      gatemonitorpost({ id: this.gateid }).then((res) => {
        if (res.status == 200) {
          this.Opening = res.data.Opening;
          this.gateopen();
          this.WaterLevel = res.data.WaterLevel;
          this.gatewaterlevel()
        }
      });
    },
    // 闸门开度渲染函数
    gateopen() {
        let data,mun 
        data =[]
        mun= []
        this.Opening.forEach((item,index)=>{
          mun.push(item)
         data.push("闸门"+(index*1+1)+"开度")
        }
        )  
        this.option_left = {
        title: {
          text: "闸门开度柱状图",
          subtext: "闸门开度单位（cm）",
          left: "center",
          textStyle: {
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: "axis",
          triggerOn: "mousemove",
          showContent: true, //是否显示提示框浮层
          alwaysShowContent: true,
          enterable: false, //鼠标是否可进入提示框浮层中
          confine: false,
          formatter:(params)=>{
              console.log(params[0])
            return params[0].name+"</br>"+"<span style='display: inline-block;width:10px; height: 10px;background-color: blue;border-radius: 50%;'></span>"+"闸门开度:"+params[0].data
          },
          borderColor: "blue",
        },
        xAxis: {
        type: 'category',
        data:data
        },
         yAxis: {
        type: 'value'
    },
    series: [{
        data: mun,
        type: 'bar',
        color: 'blue'
    }]
      };
      let myChart = echarts.init(document.getElementById("echarts_list"));
      myChart.clear()
      myChart.setOption(this.option_left);
    },
    // 闸门水位柱状图
    gatewaterlevel(){
        let mun = []
        this.WaterLevel.forEach((item,index)=>{
          mun.push(item)
        }
        )  
        this.option_right = {
        title: {
          text: "闸门水位柱状图",
          subtext: "闸门水位单位（m）",
          left: "center",
          textStyle: {
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: "axis",
          triggerOn: "mousemove",
          showContent: true, //是否显示提示框浮层
          alwaysShowContent: true,
          enterable: false, //鼠标是否可进入提示框浮层中
          confine: false,
          formatter:(params)=>{
            return params[0].name+"</br>"+"<span style='display: inline-block;width:10px; height: 10px;background-color: blue;border-radius: 50%;'></span>"+"闸门水位:"+params[0].data
          },
          borderColor: "blue",
        },
        xAxis: {
        type: 'category',
        data:['闸门上水位','闸门下水位'],
      
        },
         yAxis: {
        type: 'value'
    },
    series: [{
        data: mun,
        type: 'bar',
        color: 'blue'
    }]
      };
      let myCharts = echarts.init(document.getElementById("echarts_lists"));
      myCharts.clear()
      myCharts.setOption(this.option_right,true);   
    }
  },
};
</script>

<style scoped>
</style>